import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Icon, Search, Pagination, Feedback, Rating, Button, moment, Card, Grid } from '@icedesign/base';
import { Link } from 'react-router-dom'
import axios from 'axios'
import IceEllipsis from '@icedesign/ellipsis';
import '../../ArticleListDetail.scss'
const { Row, Col } = Grid
export default class ArticleList extends Component {
  static displayName = 'ArticleList';

  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      current: 1,
      size: '10',
      total: 0,
      filter: [
        {
          text: "标题",
          value: "aName",
        },
        {
          text: "内容",
          value: "aContent",
        },
      ],
      value: ""
    };
  }
  handleChange = (current) => {
    this.setState({
      current
    });
    this.getData(current)
  }

  onSearch = (value) => {
    console.log("bvaaa", value)
    value.value = value.filter
    delete value.filter
    delete value.filterValue
    const v = {}
    v.key = value.key
    v.value = value.value
    console.log('v', v);

    let current = this.state.current
    console.log("this.state.current", this.state)


    axios.post(`http://zzuisa.cn/reader/article/search?page=${current}&size=10`, v)
      .then((res) => {
        console.log("res-->", res)
        if (res.data.code !== 0) {
          Feedback.toast.error(res.data.message)
          this.props.history.push('/login')
        }
        if (res.data.code == 0) {
          Feedback.toast.success('欢迎回来~')
          this.setState({
            dataSource: res.data.data.content,
            // current: res.data.totalPages,
            // size: res.data.size,
            total: res.data.data.totalElements
          })
        }
      })
  }
  pdType = (param) => {
    if (param == 1)
      return '科普'
    else if (param == 2)
      return '情感'
    else if (param == 3)
      return '生活'
  }  // value为filter的值，obj为search的全量值
  onFilterChange(value, obj) {
    console.log(`filter is: ${value}`);
    console.log("fullData: ", obj);
  }


  getData = (current) => {
    axios.get(` http://zzuisa.cn/reader/article/list?page=${current}&size=10`)
      .then((res) => {
        console.log(res)
        // if (res.data.code !== 0) {
        //   Feedback.toast.error(res.data.message)
        //   this.props.history.push('/login')
        // }
        if (res.data.code == 0) {
          Feedback.toast.success('欢迎回来~')
          this.setState({
            dataSource: res.data.data.content,
            // current: res.data.totalPages,  //这个不能有， 不然的话 current 在别的方法里 取不到！
            size: res.data.size,
            total: res.data.data.totalElements
          })
        }
      })
  }
  componentWillMount() {
    this.getData(this.state.current)
  }

  render() {
    moment.locale("zh-cn");
    const { dataSource } = this.state
    console.log("current", this.state.current)
    return (
      <div className="article-list">
        <IceContainer style={styles.articleFilterCard}>
          <div className="article-sort" style={styles.articleSort}>
            <Row>
              <Col xs={6} s={2} m={2} l={2} xl={1}>
                <Button type="secondary" onClick={() => { this.props.history.push('/') }}> 返回</Button></Col>
              <Col xs={18} s={22} m={22} l={23} xl={23}>
                <Search
                  size="large"
                  onSearch={this.onSearch}
                  filter={this.state.filter}
                  onFilterChange={this.onFilterChange.bind(this)}
                />
              </Col>
            </Row>
          </div>
        </IceContainer>
        <IceContainer>
          {this.state.dataSource.map((item, index) => {
            return (

              <Link to={`/article/read/${item.id}/${this.state.total}`} className="onHover">
                <div key={index} style={styles.articleItem}>
                  <Row>
                    <Col span={24}>
                      <Card bodyHeight='auto'>
                        <a style={styles.title} href="/">
                          {item.aname}   <Rating defaultValue={item.digest} disabled onChange={val => console.log(val)} />
                        </a>
                      </Card>
                    </Col>
                  </Row>
                  <Row>
                    <Col offset={1} span={22}>
                      <Card style={{ padding: '15px', borderRadius: '8px', margin: '10px', width: '85%' }} bodyHeight='auto'>
                        <IceEllipsis style={{ padding: '15px' }} showTooltip={false} lineLimit={3} text={<div dangerouslySetInnerHTML={{ __html: `${item.acontent}` }} />} />
                      </Card>
                    </Col>
                  </Row>


                  <div style={styles.articleItemFooter}>
                    <div style={styles.articleItemTags}>
                      {/* {item.tags.map((tag, idx) => {
                      return ( */}
                      <span
                        className="article-item-tag"
                        style={styles.tag}
                      >
                        {
                          this.pdType(`${item.atype}`)
                        }
                      </span>
                      <span
                        className="article-item-tag"
                        style={styles.tag}
                      >
                        {moment().format(`${item.createtime}`)}
                      </span>
                      {/* );
                    })} */}
                    </div>

                    <div style={styles.articleItemMeta}>
                      <span style={styles.itemMetaIcon}>
                        <Icon type="good" size="small" /> 666
                    </span>
                      <span style={styles.itemMetaIcon}>
                        <Icon type="favorite" size="small" /> 666
                    </span>
                      <span style={styles.itemMetaIcon}>
                        <Icon type="comments" size="small" /> 666
                    </span>
                    </div>
                  </div>
                </div>
              </Link>
            );
          })} <Pagination
            current={this.state.current}
            pageSize={this.state.size}
            onChange={this.handleChange}
            total={this.state.total}
            hideOnlyOnePage={true}
          />

        </IceContainer>
      </div>
    );
  }
}

const styles = {
  articleFilterCard: {
    marginBottom: '10px',
    minHeight: 'auto',
    padding: 0,
  },
  articleSort: {
    marginBottom: 0,
    padding: 20,
  },
  sortItem: {
    cursor: 'pointer',
    listStyle: 'none',
    fontSize: '14px',
    float: 'left',
    whiteSpace: 'nowrap',
    padding: '20px',
  },
  articleItem: {
    padding: '15px',
    marginBottom: '30px',
    paddingBottom: '20px',
    borderBottom: '1px solid #f5f5f5',
  },
  title: {
    fontSize: '16px',
    color: '#333',
    textDecoration: 'none',
    marginTop: '15px',
    paddingTop: "10px"
  },
  desc: {
    lineHeight: '24px',
    fontSize: '14px',
    color: '#999',
  },
  articleItemFooter: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  tag: {
    fontSize: '13px',
    background: '#f5f5f5',
    color: '#999',
    padding: '4px 15px',
    borderRadius: '20px',
    marginRight: '20px',
  },
  articleItemTags: {
    padding: '10px 0',
  },
  articleItemMeta: {
    padding: '10px 0',
  },
  itemMetaIcon: {
    fontSize: '14px',
    color: '#999',
    marginRight: '15px',
  },
};
